<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>驴妈妈流立方</title>
		<meta name="description" content="overview &amp; stats" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.5.0/css/font-awesome.min.css" />
		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/daterangepicker.min.css" />
		<!-- text fonts -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/fonts.googleapis.com.css" />
		<!-- ace styles -->
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/ace-rtl.min.css" />
		
		<link rel="stylesheet" href="${rc.contextPath}/assets/css/jquery.gritter.min.css" />
		<!-- ace settings handler -->
		 <script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
	     <link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap-datetimepicker.min.css" />
	     <link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.css" /> 
	     <link rel="stylesheet" href="${rc.contextPath}/assets/css/bsie-paginator.css" />
		<script src="${rc.contextPath}/assets/js/d3.v3.min.js"></script>
	</head>
	<body class="skin-2" style="background-color: #FFF;">
		<div class="page-content">
			<!-- <div class="page-header">
				<h1>
					满意度
				</h1>
			</div> -->
			<div class="row">
				<div class="col-xs-12">
					<div class="row">
						<div class="col-xs-7">
							<div id="dynamic-table_wrapper" class="dataTables_wrapper form-inline no-footer">
								<div class="row">
									<form class="form-inline" id="searchForm" method="post" action="${rc.contextPath}/robot/satisfaction">
											<div class="form-group">
												<label>满意度
													<select name="satisfactionDegree" id="satisfaction" class="chosen-select" data-placeholder="" tabindex="2" >
														<#list condition.satisfactionList as hit>
															<option value=${hit.value!} <#if condition.satisfactionDegree == hit.value>selected</#if>>${hit.showName}</option>
														</#list>
													</select>
												</label>
											</div>
											
											<div class="form-group">
												<label>服务商
													<select name="source" id="source" class="chosen-select" data-placeholder="" tabindex="2" >
														<option value="all" <#if condition.source == "all">selected</#if>>全部</option>
														<option value="eai" <#if condition.source == "eai">selected</#if>>EAI</option>
														<option value="es"  <#if condition.source == "es">selected</#if>>ES</option>
														<!-- <option value="turing" <#if condition.source == "turing">selected</#if>>turing</option>
														<option value="self"  <#if condition.source == "self">selected</#if>>self</option> -->
													</select>
												</label>
											</div>
											<div class="form-group">
												<label>开始时间
													<input type="text" class="form-control datetimepicker" id="beginDate" name="beginDate" value="${condition.beginDate!}" placeholder="查询开始时间">
												</label>                                                                                                                                                                                                                                                                      
											</div>
											<div class="form-group">
												<label>结束时间
													<input type="text" class="form-control datetimepicker" id="endDate" name="endDate" value="${condition.endDate!}" placeholder="查询结束时间">
												</label>
											</div>
										<input type="text" name="page" id="page1" hidden="true">
											<div class="form-group">
												<button type="button" class="btn btn-pink btn-sm" id="search">
													<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
													查询
												</button>
											</div>
									</form>
								</div>
								<table id="dynamic-table" class="table table-striped table-bordered table-hover dataTable no-footer" role="grid" aria-describedby="dynamic-table_info">
									<thead>
										<tr>
											<th>No.</th>
											<th>用户ID</th>
											<th>满意度</th>
											<th>服务商</th>
											<th>时间</th>
										</tr>
									</thead>
									<tbody>
										<#if mongos?? && mongos?size&gt;0>
											<#list mongos as mongo>
												<tr class="" onclick="viewTalk(this,'${mongo.sessionId}','1')">
													<td>${mongo_index + 1}</td>
													<td>${mongo.userId!}</td>
													<td>
													<#if mongo.satisfaction=="GOOD">满意</#if>
													<#if mongo.satisfaction=="OK">一般</#if>
													<#if mongo.satisfaction=="BAD">不满意</#if>
													<#if mongo.satisfaction=="暂无">暂无</#if>
													</td>
													<!-- <td>${mongo.status!}</td> -->
													<td>${mongo.serviceApply!暂无}</td>
													<td>${mongo.createTime?string('yyyy-MM-dd HH:mm:ss 至')}
														${mongo.lastTime?string('yyyy-MM-dd HH:mm:ss')}
													</td>
													<!-- <td>
													<button onclick="viewTalk('${mongo.sessionId}','1')">
													 查看
													</button>
													</td> -->
												</tr>
											</#list>
										<#else>
											<tr>
												<td colspan="12">
													<div class="alert alert-danger" style="margin-bottom: 0px;" role="alert">没有记录!</div>
												</td>
											</tr>		
										</#if>
									</tbody>
								</table>
								<div class="ui-jqgrid">
									<div id="grid-pager" class="ui-state-default ui-jqgrid-pager ui-corner-bottom" dir="ltr">
										<div id="pg_grid-pager" class="ui-pager-control" role="group">
											<table cellspacing="0" cellpadding="0" border="0" class="ui-pg-table" style="width: 100%; table-layout: fixed; height: 100%;" role="row">
												<tbody>
													<tr>
														<td id="grid-pager_left" align="left"></td>
														<td id="grid-pager_center" align="center"
															style="white-space: pre; width: 343px;"><table
																cellspacing="0" cellpadding="0" border="0"
																style="table-layout: auto;" class="ui-pg-table">
																<tbody>
																	<tr>
																		<td id="first_grid-pager" onclick="showPage(${page.firstPage!})"
																			class="ui-pg-button ui-corner-all <#if page.isFirstPage>ui-state-disabled</#if>"
																			style="cursor: pointer;"><span
																			class="ui-icon ace-icon fa fa-angle-double-left bigger-140"></span></td>
																		<td id="prev_grid-pager" onclick="showPage(${page.prePage!})"
																			class="ui-pg-button ui-corner-all <#if page.isFirstPage>ui-state-disabled</#if>"
																			style="cursor: pointer;"><span
																			class="ui-icon ace-icon fa fa-angle-left bigger-140"></span></td>
																		<td dir="ltr">Page <input class="ui-pg-input" type="text" id="page"
																			size="2" maxlength="7" value="${page.pageNum!}" role="textbox"> of <span
																			id="sp_1_grid-pager">${page.pages!}</span></td>
																		<td id="next_grid-pager" onclick="showPage(${page.nextPage!})" class="ui-pg-button ui-corner-all <#if page.isLastPage>ui-state-disabled</#if>"
																			style="cursor: pointer;"><span
																			class="ui-icon ace-icon fa fa-angle-right bigger-140"></span></td>
																		<td id="last_grid-pager" onclick="showPage(${page.lastPage!})" class="ui-pg-button ui-corner-all <#if page.isLastPage>ui-state-disabled</#if>"
																			style="cursor: pointer;"><span
																			class="ui-icon ace-icon fa fa-angle-double-right bigger-140"></span></td>
																			
																	</tr>
																</tbody>
															</table></td>
															<td id="grid-pager_right" align="right"><div dir="ltr"
																style="text-align: right" class="ui-paging-info"></div></td>
														</tr>
												</tbody>
											</table>
											<input type="text" name="sessionId" id="sessionId" hidden="true">
											<input type="text" name="prePage" id="prePage" hidden="true">
											<input type="text" name="nextPage" id="nextPage" hidden="true">
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-sm-5">
							<div id="container3"></div>
						<div hidden="true" id="container2">
								<div class="col-xs-12">
									<div class="dataTables_wrapper form-inline no-footer">
										<table id="dynamic-table" class="table table-striped table-bordered table-hover dataTable no-footer" role="grid" aria-describedby="dynamic-table_info">
											<thead>
												<tr>
													<th>No.</th>
													<th>时间</th>
													<th>内部状态</th>
													<th>问题</th>
													<th>回答</th>
												</tr>
											</thead>
											<tbody>
												<tbody id="td">
												</tbody>
											</tbody>
										</table>
										<div class="ui-jqgrid" id="pager" >
											<div  class="ui-state-default ui-jqgrid-pager ui-corner-bottom" dir="ltr">
												<div  class="ui-pager-control" role="group">
													<table cellspacing="0" cellpadding="0" border="0" class="ui-pg-table"
														style="width: 100%; table-layout: fixed; height: 100%;" role="row">
														<tbody>
															<tr>
																<td  align="left"></td>
																<td align="center"
																	style="white-space: pre; width: 343px;"><table
																		cellspacing="0" cellpadding="0" border="0"
																		style="table-layout: auto;" class="ui-pg-table">
																		<tbody>
																			<tr>
																				<td  onclick="viewTalk(this,'sessionId','firstPage')"
																					class="ui-pg-button ui-corner-all "
																					style="cursor: pointer;"><span
																					class="ui-icon ace-icon fa fa-angle-double-left bigger-140"></span></td>
																				<td  onclick="viewTalk(this,'sessionId','prePage')"
																					class="ui-pg-button ui-corner-all"
																					style="cursor: pointer;"><span
																					class="ui-icon ace-icon fa fa-angle-left bigger-140"></span></td>
																				<td>Page <input class="ui-pg-input" type="text" id="page2"
																					size="2" maxlength="7" value="1" role="textbox"> of <span
																					id="totalPage"></span></td>
																				<td  onclick="viewTalk(this,'sessionId','nextPage')" class="ui-pg-button ui-corner-all "
																					style="cursor: pointer;"><span
																					class="ui-icon ace-icon fa fa-angle-right bigger-140"></span></td>
																				<td  onclick="viewTalk(this,'sessionId','lastPage')" class="ui-pg-button ui-corner-all"
																					style="cursor: pointer;"><span
																					class="ui-icon ace-icon fa fa-angle-double-right bigger-140"></span></td>
																			</tr>
																		</tbody>
																	</table>
																	</td>
																	<td id="grid-pager_right" align="right"><div dir="ltr"
																		style="text-align: right" class="ui-paging-info"></div></td>
															</tr>
														</tbody>
													</table>
												</div>
											</div>
										</div>
									</div>
								</div>
						</div>
						<div class="hr hr-18 dotted hr-double"></div>
				</div>
			</div>
		</div>		
		<script src="${rc.contextPath}/assets/js/jquery-2.1.4.min.js"></script>
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='${rc.contextPath}/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>

		<!-- page specific plugin scripts -->
		<script src="${rc.contextPath}/assets/js/moment.min.js"></script>
		<script src="${rc.contextPath}/assets/js/bootstrap-datetimepicker.min.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/echarts.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
		<!-- ace scripts -->
		<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
		<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
		<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
		<!-- user scripts -->
		<script src="${rc.contextPath}/assets/js/user/base.js"></script>		
		<script src="${rc.contextPath}/assets/js/chosen.jquery.js"></script>					
		<script type="text/javascript">
            d3.select(self.frameElement).style("height", "1200px");
			var message = "${message}";
			if(!isEmpty(message)) {
				showMsg(message);
			}
			jQuery(function($) {
				var myChart1;
				var options = {
						format:'YYYY-MM-DD HH:mm:ss'
				}
				$('.datetimepicker').datetimepicker(options).next().on(ace.click_event, function(){
					$(this).prev().focus();
				});
				
				$("#search").on("click",function(){
					$(this).attr("disabled","true");
					$(this).attr("readOnly","true");
					$("#searchForm").submit();
				});
			})
			var showPage = function(page) {
				$("#page1").val(page);
				$("#searchForm").submit();
			};
			function viewTalk(obj,sessionId,page) {
				if(/^[1-9]\d*$/.test(page)){
					$("tr").css("background-color","");
					$("td").css("background-color","");
					$(obj).css("background-color","#C6487E");
					$(obj).children("td").css("background-color","#C6487E");
				}
				//$("#container2").hide();
				 if(sessionId!="sessionId"){
					 $("#sessionId").val(sessionId);
				 }
				 if(sessionId=="sessionId"){
					 sessionId=$("#sessionId").val();
				 }
				 if(page=="firstPage"){
					 page="1";
				 }
				 if(page=="lastPage"){
					 page=$("#totalPage").text();
				 }
				 if(page=="prePage"){
					 page=$("#prePage").val();
				 }
				 if(page=="nextPage"){
					 page=$("#nextPage").val();
				 }
				 $("#main1").height(200);
				 option1.series[0].radius='70%';
				 myChart1.setOption(option1);
				 myChart1.resize();
				 console.log(page);
				 $.ajax({
					   url: "${rc.contextPath}/robot/viewTalkData",
					   data: "sessionId="+sessionId+"&page="+page,
					   success: function(data){
						   $("#container2").show();
						   $("#td").empty();
						   $("#totalPage").empty();
						   if(data==null || data.length==0){
							   showMsg("无相关数据");
							   return;
						   }
						  
						   var html="";
						   for(var i=0;i<data.questionAndAnswer.length;i++){
							   var html1="<tr><td>"+(i+1)+"</td>"+"<td>"+new Date(data.questionAndAnswer[i].createTime).format('yyyy-MM-dd hh:mm:ss')+"</td>"+"<td>"+data.questionAndAnswer[i].internalStatus+"</td>"+"<td>"+data.questionAndAnswer[i].question+"</td>"+"<td>"+data.questionAndAnswer[i].answer+"</td></tr>"
							   html+=html1;
						   }
						   $("#td").append(html);
						   var page2=data.pageNum;
						   $("#page2").val(page2);
						   var totalPage=data.totalPage;
						   $("#totalPage").append(totalPage);
						   var prePage=data.prePage;
						   $("#prePage").val(prePage);
						   var nextPage=data.nextPage;
						   $("#nextPage").val(nextPage);
					   }
				});
			}
			$(function(){
				var beginDate=$("#beginDate").val();
				var endDate=$("#endDate").val();
				 if(beginDate==""&&endDate!=""){
					return;
				} 
				 if(beginDate!=""&&endDate==""){
					return;
				} 
			 	$.ajax({
				   url: "${rc.contextPath}/robot/ajaxSatisfactionPie",
				   data: "beginDate="+beginDate+"&endDate="+endDate,
				   success: function(data){
					   $("#container3").empty();
					      option1 = {
				  	    		    /* title : {
				  	    		        text: '',
				  	    		        x:'center'
				  	    		    }, */
				  	    		    tooltip : {
				  	    		        trigger: 'item',
				  	    		        formatter: "{b} : {c} ({d}%)"
				  	    		    },
				  	    		    series : [
				  	    		        {
				  	    		           /*  name: '访问来源', */
				  	    		            type: 'pie',
				  	    		            radius : '50%',
				  	    		            center: ['50%', '50%'],
				  	    		            data:data,
				  	    		            itemStyle: {
				  	    		                emphasis: {
				  	    		                    shadowBlur: 10,
				  	    		                    shadowOffsetX: 0,
				  	    		                  	shadowOffsetY:0,
				  	    		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				  	    		                },
			    	    		                normal:{ 
			    	                                label:{ 
			    	                                   show: true, 
			    	                                   formatter: '{b} : {c} ({d}%)' 
			    	                                }, 
			    	                                labelLine :{show:true},
			    	                                borderWidth:0,
			    	                                shadowOffsetX:0,
			    	                                shadowOffsetY:0
			    	                            } 
				  	    		            }
				  	    		        }
				  	    		    ]
				  	    		};
					  var divhtml="<div class='right' id='main1' style='width:100%;height:600px;left:0 auto;'></div>";
			    	      $("#container3").append(divhtml);
			    	if(data !=null && data.length!=0 ){
		    	      myChart1 = echarts.init(document.getElementById('main1'));
	    	    	  myChart1.setOption(option1);
	    	    	  window.onresize = function(){
	    	    		  myChart1.resize();
				  	  }
			    	  }
				   }
				});
			})
		</script>
	<script type="text/javascript">
		//日期格式化
        Date.prototype.format =function(format)
        {
            var o = {
                "M+" : this.getMonth()+1, //month
                "d+" : this.getDate(), //day
                "h+" : this.getHours(), //hour
                "m+" : this.getMinutes(), //minute
                "s+" : this.getSeconds(), //second
                "q+" : Math.floor((this.getMonth()+3)/3), //quarter
                "S" : this.getMilliseconds() //millisecond
            }
            if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
                (this.getFullYear()+"").substr(4- RegExp.$1.length));
            for(var k in o)if(new RegExp("("+ k +")").test(format))
                format = format.replace(RegExp.$1,
                    RegExp.$1.length==1? o[k] :
                        ("00"+o[k]).substr((""+ o[k]).length));
            return format;
        }

		$(window).keydown(function(event){
			  if(event.keyCode=="13") {
				  var page=$("#page").val();
				  $("#page1").val(page);
				  $("#searchForm").submit();
			  }
			});
		
		$(".chosen-select").chosen({
		    no_results_text: "没有找到",//搜索无结果时显示的提示
		    search_contains:true,   //关键字模糊搜索，设置为false，则只从开头开始匹配
		    allow_single_deselect:true, //是否允许取消选择
		    max_selected_options:6  //当select为多选时，最多选择个数
		});
	</script>
	</body>
</html>